<template>
  <div>
    <h2>停车统计</h2>
    <div id="chart-four" class="four"></div>
  </div>
</template>

<script setup>
import { inject, onMounted, reactive } from "vue";
import link from "@/api/link.js";
import apiUrl from "@/api/url.js";
let $echarts = inject("echarts");

onMounted(() => {
  let myChart = $echarts.init(document.getElementById("chart-four"));

  link(apiUrl.chartDataIV).then((resolve) => {
    let { data } = resolve;
    console.log(data);

    myChart.setOption({
      xAxis: {
        type: "category",
        data: data.day,
      },
      yAxis: {
        type: "value",
      },
      legend: { top: "top" },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      series: [
        {
          name: "一般用户",
          type: "bar",
          data: data.number.一般用户,
          stack: "total",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
        },
        {
          name: "月租用户",
          type: "bar",
          data: data.number.月租用户,
          stack: "total",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
        },
        {
          name: "特殊车辆",
          type: "bar",
          data: data.number.特殊车辆,
          stack: "total",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
        },
      ],
    });
  });
});
</script>

<style scoped lang="scss">
h2 {
  height: 0.35rem;
  color: #fff;
  line-height: 0.35rem;
  text-align: center;
  font-size: 0.25rem;
}
.four {
  height: 5.6rem;
}
</style>
